<template>
	<view class="content">
		<view class="sheet" :class="{sheetShow:isShowCommodityInfo,sheeHide:!isShowCommodityInfo}" @click="closeSheet()">
			<view class="sheetView pickerbox" :class="{sheetView_active:isShowCommodityInfo}"  @click.stop="stopEvent()">
				<view class="top">
					<view class="leftInfo">
						<image :src="selectImg" mode="scaleToFill"></image>
						<view class="infoBox">
							<view class="price">
								￥<text>{{selectPrice}}</text>
							</view>
							<view class="stock">
								库存{{stock}}件
							</view>
							<view class="selected">
								已选：<text>{{selcetSp1}}</text>
								<text v-if="selcetSp2">/{{selcetSp2}}</text><text v-if="selcetSp3">/{{selcetSp3}}</text>
							</view>
						</view>
					</view>
					<image class="closeBtn" @tap="closeSheet()" src="../../static/images/del_icon.png" mode="widthFix"></image>
				</view>
				
			<scroll-view scroll-y="true"  class="select">
					<view class="uni-list types">
						<view class="uni-list-cell" v-for="(item,index) in typeList" :key="index">
							<view class="title">
								{{item.name}}
							</view>
							<view class="btns" v-if="index == 0">
								<view class="btn" v-for="(item1,index1) in sp1List" :key="index1" :class="{active:sp1Current == index1}"  @tap="getSelectSp1(item1,index1)">
									{{item1}}
								</view>
							</view>
							<view class="btns" v-if="index == 1" >
								<view class="btn" v-for="(item2,index2) in sp2List" :key="index2" :class="{active:sp2Current == index2}" @tap="getSelectSp2(item2,index2)">
									{{item2}}
								</view>
							</view>
							<view class="btns" v-if="index == 2">
								<view class="btn" v-for="(item3,index3) in sp3List" :key="index3" :class="{active:sp3Current == index3}" @tap="getSelectSp3(item3,index3)">
									{{item3}}
								</view>
							</view>
						</view>
					</view>
			</scroll-view>
			
				<view class="inputBox">
					<text>数量</text>
					<view class="num">
						<view class="less" :class="{disabled:inputNum <= 1}" @tap="less">
							-
						</view>
						<input type="number" disabled v-model="inputNum" />
						<view class="add" @tap="add">
							+
						</view>
					</view>
				</view>
				<view class="submitBtn" @tap="submit">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "bottomSheet",
		data() {
			return {
				isShowCommodityInfo: true,
				startSend: "",
				param: {},
				id: "",
				productAttributeCategoryId: "",
				typeList: [],
				sp1List: [],
				sp2List: [],
				sp3List: [],
				sp1Current:0,
				sp2Current:0,
				sp3Current:0,
				inputNum:1,
				selectImg:"",
				selectPrice:0,
				dataList:[],
				selcetSp1:"",
				selcetSp2:"",
				selcetSp3:"",
				stock:0,
				commodityInfo:{}

			}
		},
		mounted() {
			this.id = this.$parent.id;
			this.productAttributeCategoryId = this.$parent.productAttributeCategoryId;
			this.commodityInfo = this.$parent.commodityInfo;
			console.log(this.commodityInfo)
			this.getCommodityInfo()
		},
		methods: {
			closeSheet() {
				this.$emit('closeBottom');
			},
			stopEvent(){						//@click.stop防止事件冒泡
			},
			//获取sku
			getdata() {
				let data = {
					activityProductId: this.id
				}
				this.$http.post('/api/v1.0/activity/getActivitySku', data, res => {
					this.dataList = res.data.data;
					for (let i = 0; i < res.data.data.length; i++) {
						this.sp1List.push(res.data.data[i].sp1)
						this.sp2List.push(res.data.data[i].sp2)
						this.sp3List.push(res.data.data[i].sp3)
					}
					
					//去重
					this.sp1List = [...new Set(this.sp1List)]
					this.sp2List = [...new Set(this.sp2List)]
					this.sp3List = [...new Set(this.sp3List)]
					
					
					this.selectImg = res.data.data[0].pic;
					this.selectPrice = res.data.data[0].promotionPrice;
					this.selcetSp1 = res.data.data[0].sp1;
					this.selcetSp2 = res.data.data[0].sp2;
					this.selcetSp3 = res.data.data[0].sp3;
					this.stock = res.data.data[0].stock;
				})
			},
			
			//获取商品sku分类
			getCommodityInfo() {
				let data = {
					"cid": this.productAttributeCategoryId,
					"pageNum": 0,
					"pageSize": 0,
					"type": 0,
				}
				this.$http.post('/api/v1.0/app/product/getProductAttributeList', data, res => {
					this.typeList = res.data.data;
					this.getdata();
				})
			},
			less(){
				if(this.inputNum > 1){
					this.inputNum--
				}else{
					this.inputNum = 1
				}
			},
			add(){
				uni.showToast({
					title:"秒杀商品限购一件",
					icon:'none'
				})
			},	
			getSelectSp1(item,index){
				this.sp1Current = index
				this.selcetSp1 = item;
				for (let i = 0; i < this.dataList.length; i++) {
					if(this.dataList[i].sp1 == item && this.selcetSp2 == this.dataList[i].sp2 && this.selcetSp3 == this.dataList[i].sp3){
						this.selectImg = this.dataList[i].pic;
						this.selectPrice = this.dataList[i].promotionPrice;
						this.selcetSp1 = this.dataList[i].sp1;
						this.selcetSp2 = this.dataList[i].sp2;
						this.selcetSp3 = this.dataList[i].sp3;
						this.stock = this.dataList[i].stock;
						return;
					}
				}
			},
			getSelectSp2(item,index){
				this.sp2Current = index;
				this.selcetSp2 = item;
				for (let i = 0; i < this.dataList.length; i++) {
					if(this.dataList[i].sp1 == this.selcetSp1 && item == this.dataList[i].sp2 && this.selcetSp3 == this.dataList[i].sp3){
						this.selectImg = this.dataList[i].pic;
						this.selectPrice = this.dataList[i].promotionPrice;
						this.selcetSp1 = this.dataList[i].sp1;
						this.selcetSp2 = this.dataList[i].sp2;
						this.selcetSp3 = this.dataList[i].sp3;
						this.stock = this.dataList[i].stock;
					}
				}
			},
			getSelectSp3(item,index){
				this.sp3Current = index;
				this.selcetSp3 = item;
				for (let i = 0; i < this.dataList.length; i++) {
					if(this.dataList[i].sp1 == item && this.selcetSp2 == this.dataList[i].sp2 && item == this.dataList[i].sp3){
						this.selectImg = this.dataList[i].pic;
						this.selectPrice = this.dataList[i].promotionPrice;
						this.selcetSp1 = this.dataList[i].sp1;
						this.selcetSp2 = this.dataList[i].sp2;
						this.selcetSp3 = this.dataList[i].sp3;
						this.stock = this.dataList[i].stock;
					}
				}
			},
			submit(){
				if(this.$parent.timeDown >0 && this.$parent.statusDesction == '距开始'){
					uni.showToast({
						title:'活动还没有开始哦~',
						icon:'none'
					})
					return;
				}
				let productSkuCode = ""
				let id = ""
				let promotionPrice = ""
				let activityProductSkuId = ""
				let activityProductId = ""
				for (let i = 0; i < this.dataList.length; i++) {
					if(this.dataList[i].sp1 == this.selcetSp1 && this.dataList[i].sp2 == this.selcetSp2 && this.dataList[i].sp3 == this.selcetSp3){
						productSkuCode = this.dataList[i].productSkuCode
						id = this.dataList[i].id
						promotionPrice = this.dataList[i].promotionPrice
						activityProductSkuId = this.dataList[i].id
						activityProductId = this.dataList[i].activityProductId
						break
					}
				}
				let data = {
					  "accountId": uni.getStorageSync('buyerAccountId'),
					  "addressId": "",
					  "categoryId": this.commodityInfo.productCategoryId,
					  "categoryName": this.commodityInfo.productCategoryName,
					  "count": this.inputNum,
					  "merchantId": this.commodityInfo.merchantId,
					  "merchantName": this.commodityInfo.merchantName,
					  "note": "string",
					  "orderType": 7,
					  "payPrice": 0,
					  "payType": 0,
					  "price": this.selectPrice,
					  "productAttr": this.selcetSp1,//0.0
					  "productBrand": this.commodityInfo.brandName,
					  "productId": this.commodityInfo.id,
					  "productName": this.commodityInfo.name,
					  "productPic":  this.commodityInfo.pic.split(',')[0],
					  "productSkuCode": productSkuCode,
					  "productSkuId": id,
					  "productSn": this.commodityInfo.productSn,
					  "shopFee":  this.commodityInfo.freight,
					  "sp1": this.selcetSp1,
					  "sp2": this.selcetSp2,
					  "sp3": this.selcetSp3,
					  "storeId": this.commodityInfo.storeId,
					  "storeName": this.commodityInfo.storeName,
					  "totalAmount": 0,
					  "activityId": this.$parent.activityId,
					  "activityProductId": activityProductId,
					  "activityProductSkuId": activityProductSkuId,
					  "productBranch": "",
					  "realPrice": 0,
				}
				uni.navigateTo({
					url:'../../pages/myorder/creatOrder?type=seckill&data=' + encodeURIComponent(JSON.stringify(data))
				})
				this.closeSheet()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* sheet弹窗 */
	.sheet {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 120%;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		background: rgba(0, 0, 0, 0.3);
		z-index: 10000;
	}

	/* 显示时候的动画默认0.5s */
	.sheetView {
		width: 100%;
		height: 0upx;
		position: absolute;
		bottom: 0upx;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
	}
	.sheetShow {
		top: 0upx !important;
	}
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide {
		top: 120% !important;
		transition: all 0.5s;
	}
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active {
		height: 80vh;
		background-color: #fff;
		border-radius: 30upx 30upx 0 0;
	}

	.pickerbox {
		padding: 30upx;
		box-sizing: border-box;
	}

	.pickerbox .top {
		display: flex;
		justify-content: space-between;
		position: relative;

		.leftInfo {
			display: flex;
			justify-content: space-between;

			image {
				width: 264upx;
				height: 264upx;
				margin-right: 30upx;
			}

			.infoBox {
				.price {
					font-size: 24upx;
					font-weight: bold;
					color: #f63810;
					margin-top: 62upx;

					text {
						font-size: 32upx;
					}
				}

				.stock {
					font-size: 24upx;
					color: #999;
					margin-top: 20upx;
				}

				.selected {
					width: 400upx;
					margin-top: 35upx;
					font-size: 24upx;
					color: #333;
				}
			}
		}

		.closeBtn {
			position: absolute;
			width: 24upx;
			height: 24upx;
			right: 0;
			top: 0;
		}
	}
	.select{
		height: 50%;
	}
	.pickerbox .types {
		margin-top: 40upx;

		.list-call {
			border-bottom: 1upx solid #E6E6E6;
		}

		.title {
			color: #333;
			margin-top: 30upx;
		}

		.btns {
			margin-top: 28upx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			font-size: 24upx;
			.btn {
				color: #333;
				padding: 15upx 20upx;
				background-color: #E6E6E6;
				margin-top: 28upx;
				border-radius: 10upx;
				margin-right: 20upx;

				&.active {
					background-color: #F63810;
					color: #fff;
				}
			}
		}
	}
	.pickerbox .inputBox{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		.num {
			display: flex;
			// align-items: center;
			text-align: center;
			font-size: 28upx;
		
			view {
				display: inline-block;
				width: 40upx;
				height: 40upx;
				background-color: #EBEBEB;
				line-height: 40upx;
		
				&.disabled {
					background-color: #f2f2f2;
					color: #CCCCCC;
				}
			}
		
			input {
				width: 97upx;
				height: 40upx;
				line-height: 40upx;
				min-height: 40upx;
				margin: 0 10upx; //2
				background-color: #EBEBEB;
			}
		}
	}
	.pickerbox .submitBtn{
		height: 100upx;
		line-height: 100upx;
		background:linear-gradient(0deg,rgba(232,39,27,1),rgba(250,94,52,1));
		font-size: 36upx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		margin-top: 30upx;
	}
</style>
